<template>
  <div v-title="'短信充值 - 世外生活运营平台'" class="MkMessageRechange">
    <mk-breadcrumb  :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <div class="el-tabs globalTabsStyle ">
      <el-tabs v-model="clickFlowTab" @tab-click="handleClick">
        <el-tab-pane label="客户列表" name="first">
          <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightBig)+'px'}]">
            <MkMessageList :clickFlowTab="clickFlowTab"></MkMessageList>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="充值记录" name="second">
          <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightBig)+'px'}]">
            <MkMessageRecord :clickFlowTab="clickFlowTab"></MkMessageRecord>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../components/MkBreadcrumb.vue'
    import MkMessageList from './MkMessageList.vue'
  import MkMessageRecord from './MkMessageRecord.vue'
import {mapState} from 'vuex'
  export default {
    name: 'MkMessageRechange',
    methods: {
      handleClick() {
      },
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightBig: state=> state.global.fixedHeightBig
    }),
    data () {
      return{
        clickFlowTab:'first',
        breadcrumbData:{
          list: [{name:'运营管理',path: null, clickAble: false},
            {name: '短信充值',path: null, clickAble: false},
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'operation-icon',
        }
      }
    },
    components:{
      MkBreadcrumb,MkMessageList,MkMessageRecord
    },
    mounted: function() {
      if(this.$route.query.tab){
        this.clickFlowTab = this.$route.query.tab;
      }
    },
    watch: {
    },
  }
</script>
<style lang="less">
  @import '../../assets/style/main.less';
  .MkMessageRechange{
    .breadcrumb-box{
      -moz-box-shadow:none;
      -webkit-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
    }
    .el-table__expand-icon{
      height: 60px;
      .el-icon{
        margin-left: 0;
        margin-top: 0;
        &:before{
          content: "\E606";
          color: lightgrey;
          width: 16px;
          height: 16px;
          position: absolute;
          top: 50%;
          transform:translate(0,-50%);
          -ms-transform:translate(0,-50%); 	/* IE 9 */
          -moz-transform:translate(0,-50%); 	/* Firefox */
          -webkit-transform:translate(0,-50%); /* Safari 和 Chrome */
          -o-transform:translate(0,-50%);
          font-size: 16px;
        }
      }
    }
  }
</style>
